<template>
  <div id="rou">
      <div class="login"  >
           <i class="iconfont icon-wangyiyunyinle"></i>
           <div class="right">
              <span >昵称：</span><input type="text" v-model="isRun3"  >
          </div>
          <div class="left">
              <span>手机号：</span>
              <input type="text" v-model="isRun">
          </div>
          <div class="right">
              <span >验证码：</span><input type="number" v-model="isRun1" >
          </div>
          <div class="left">
              <span>密码：</span>
              <input type="password" v-model="isRun2" >
          </div>
          
      </div>
      
      <div class="but">
         <template>
          <button @click="abs" >{{cone}}</button>
         </template>
          <button @click="at" >注册</button>

          <button @click="uo">登录</button>
      </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
// import {message} from 'ant-design-vue';
export default {
data:()=>{
    return {
        isRun:'',
        isRun1:'',
        isRun2:'',
        isRun3:'',
        num:60,
        is:true,
        cone:'发送验证码'
    }
},
methods:{
   async abs(){
        this._axios.get(`/captcha/sent?phone=${this.isRun}`).then((res)=>{
           if(res.data.code===400){
               message.error('手机号码不符合规范')
           }else{
               message.success("验证码发送成功")
               this.is=false
               this.num=60
               let text1 = setInterval(()=>{
                 this.num--
                 this.cone=this.num
                 if(this.num===0){
                     this.cone='发送验证码'
                     this.num=this.cone
                     clearTimeout(text1)
                 }
               },1000)
           }
        })
    },
    at(){
        this._axios.get(`/register/cellphone?phone=${this.isRun}&captcha=${this.isRun1}&password=${this.isRun2}&nickname=${this.isRun3}`).then((res)=>{
            // if(res.code===408) return message.error("操作过于频繁")
            // if(res.code===503) return message.error("验证码错误")
            if(res.data.code===200) return message.success('注册成功')
            console.log(res);
        }).catch((err)=>{
            // if(err) return message.error("验证码错误")
            if(err.code===503) return message.error("验证码错误")
            if(err.code===505) return message.error("昵称已被占用")
            if(err.code===408) return message.error("操作过于频繁")
        })
       
    },
    uo(){
        this.$router.push({path:'/'})
    }
}
}
</script>

<style lang='scss' scopen>
   #rou{
       height: 100%;
       background-color: skyblue;
       
       .login{
           
           
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           align-items: center;
           i{
             margin-top: _vw(100);
               display: block;
               font-size: _vw(70);
               color: #fff;
           }
           .left{
               margin-top: _vw(60);
               text-align: center;
               width: _vw(550);
               height: _vw(100);
               background-color: #fff;
               border-radius: _vw(40);
               line-height: _vw(100);
               span{
                   display: inline-block;
               }
               input{
                   width: _vw(400);
                   height: _vw(70);
                   border: none;
                   outline: none;
               }
           }
           .right{
               margin-top: _vw(60);
               text-align: center;
               width: _vw(550);
               height: _vw(100);
               background-color: #fff;
               border-radius: _vw(40);
               line-height: _vw(100);
                span{
                   display: inline-block;
               }
               input{
                   width: _vw(400);
                   height: _vw(70);
                   border: none;
                   outline: none;
               }
           }
       }
       .but{
           margin-top: _vw(80);
           display: flex;
           justify-content: center;
           button{
              width: _vw(200);
              height: _vw(80);
              background-color: #fff; 
              border: 1px solid #fff;
              margin: _vw(20);
              font-size: _vw(28);
              border-radius: _vw(40) ;
           }
       }
   }
</style>